<template>
  <div class='count'>
    <h1>{{count}}</h1>
    <button @click='add(num)'>累加</button>
  </div>
</template>

<script>
export default {
    name:'Count',
    // /* 
    //     在组件的配置项中，声明要接受的props的属性
    //      - 在当前的组件实例上有一个_props的对象，保存着当前接收的prop，
    //      - 并且在组件实例上也放了，可以直接获取
    // */
    // props:['num'],

    // props配置项在接收prop的时候，可以做类型限制
    // props:{
    //     num:Number
    // },

    props:{
        num:{
            type:Number
        },
        // id:{
        //     // 必填项
        //     required:true
        // }
    },
    data(){
        return {
            count:0
        }
    },
    methods:{
        add(num){
            console.log(this);
            this.count +=num
        },
        
    }
};
</script>

<style>
.count{
    background-color: aquamarine;
    height: 300px;
}
</style>